$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;
  padding-top: 8vw;

  .section1 {
    margin: 2vw 15vw 4vw 15vw;
    border-radius: 120/$f+vw;
    background: #F7F6FA;
    text-align: center;
    padding: 4vw 0;
    transform: scale(.95);
    svg{
      vertical-align: middle;
      max-width: 90%;
      //opacity: 0;
      transition: .6s;
      .an{
        opacity: 0;
        transition: 1s;
      }
      .an1{
        stroke-dasharray: 951.518px;
        stroke-dashoffset: 951.518px;
      }
      .an2{
        stroke-dasharray: 1762.15px;
        stroke-dashoffset: 1762.15px;
      }
      .an3{
        stroke-dasharray: 210.002px;
        stroke-dashoffset: 210.002px;
      }
      .an5{
        stroke-dasharray: 1029.02px;
        stroke-dashoffset: 1029.02px;
      }
      .an6{
        stroke-dasharray: 2487.14px;
        stroke-dashoffset: 2487.14px;
      }

     .an7{
       stroke-dasharray: 545.124px;
       stroke-dashoffset: 545.124px;
      }

      .an9,.an10{
        stroke-dasharray: 741.116px;
        stroke-dashoffset: 741.116px;
      }

      .an11{
        stroke-dasharray: 1038.39px;
        stroke-dashoffset: 1038.39px;
      }
      .an12{
        stroke-dasharray: 2487.14px;
        stroke-dashoffset: 2487.14px;
      }

      .an13{
        stroke-dasharray: 2487.14px;
        stroke-dashoffset: 2487.14px;
      }
    }
    &.on{
      svg{
        .an{
          stroke-dashoffset: 0!important;
          opacity: 1!important;
        }
      }
    }
  }


  .section4 {
    background: #61C0BD;
    text-align: center;
    padding: 5vw 0 3vw 0;

    .t {
      color: #FFF;
      font-size: $fontSize_70;
      font-family: 'Montserrat-Regular.otf';
      text-transform: capitalize;
      line-height: 1.2;
    }

    a {
      display: flex;
      justify-content: center;
      width: fit-content;
      margin: 3vw auto 0 auto;
      align-items: center;

      p {
        font-size: $fontSize_24;
        font-style: italic;
        font-family: 'Newsreader';
        color: white;
        text-transform: capitalize;
      }

      svg {
        display: block;
        margin-top: 0.3vw;
        width: 30/$f+vw;
      }
    }
  }



  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .section1{
      margin: 20px 5%;
      padding: 20px 0;
      transform: scale(1);
      svg{
        height: auto;
      }
    }
    .section4{
      padding: 40px 0 30px 0;
      .t{
        font-size: 32px;
      }
      a{
        margin: 20px auto 0 auto;
        p{
          font-size: 18px;
        }
        svg{
          width: 25px;
          transform: translateY(2px);
        }
      }
    }
  }
}